<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            list-style: none;
        }

        .t {
            width: 200px;
            height: 60px;
            line-height: 60px;
        }

        .title {
            width: 250px;
            position: relative;
            left: 30px;
            top: 10px;
        }

        .gg {
            margin-left: 80px;
        }

        .box {
            position: fixed;
            left: 300px;
            top: 10px;
        }

        img {
            width: 300px;
            height: 250px;
        }

        .xiang {
            width: 400px;
            height: 500px;
            background-color: wheat;
            border: 2px black solid;
            border-radius: 10px;
            position: fixed;
            left: 300px;
            top: 40px;
        }

        h1 {
            margin-left: 130px;
            color: #10b0c6;
        }

        .xiang img {
            margin-left: 50px;
        }

        .xiang p {
            margin-left: 30px;
            font-size: 20px;
            margin-top: 20px;
        }

        .xiang button {
            background-color: #10b0c6;
            color: white;
            position: absolute;
            right: 20px;
            bottom: 20px;
        }

        .ggk {
            width: 450px;
            height: 220px;
            background-color: whitesmoke;
            border: 2px black solid;
            border-radius: 10px;
            position: fixed;
            left: 100px;
            top: 40px;
        }

        .ggk h3 {
            margin-left: 150px;
        }

        .ggk p {
            margin-left: 30px;
            font-size: 15px;
            margin-top: 20px;
        }

        .ggk button {
            width: 300px;
            height: 50px;
            background-color: #10b0c6;
            color: white;
            margin-left: 40px;
            font-size: 18px;
        }

        .ttt {
            width: 200px;
            height: 100px;
            background-color: #10b0c6;
            color: white;
        }

        .dox {
            width: 400px;
            height: 500px;
            background-color: wheat;
            border: 2px black solid;
            border-radius: 10px;
            position: fixed;
            left: 300px;
            top: 40px;
        }
    </style>
</head>

<body>
    <h1>半天妖烤鱼</h1>
    <p class="gg"><b><span>公告</span></b></p>
    <ul class="title">
        <li class="t">招牌烤鱼</li>
        <li class="t">专属虾锅</li>
        <li class="t">特色烧烤</li>
    </ul>
    <ul class="box">

    </ul>
    <ul class="dox">

    </ul>
    <div class="g">

    </div>
    <div class="xiang">

    </div>
    <div class="ggk">
        <h3>门店公告</h3>
        <p>商家公告</p>
        <p>客官：请适度点餐，关闭光盘行动拒绝浪费，使用公勺公筷</p>
        <button>知道了</button>
    </div>
    <button class="ttt" onclick="tj()">提交</button>
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script>
        var arr = [{
            pid: 0,
            id: 0,
            name: "青花椒烤鱼",
            img: "https://ts1.tc.mm.bing.net/th/id/OIP-C.ETYb7IkHN_sYRrHwqxJMPAHaFj?w=184&h=185&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2",
            price: 79,
            num: 1
        }, {
            pid: 0,
            id: 1,
            img: "https://ts1.tc.mm.bing.net/th/id/OIP-C.7Jd97b76Il_Vy7PQybFMcAHaE7?w=188&h=185&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2",
            name: "咖咖给喱烤鱼",
            price: 79,
            num: 1
        }, {
            pid: 1,
            id: 2,
            img: "https://ts1.tc.mm.bing.net/th/id/OIP-C.Tk6Slc7AtmZKijLYGjudzwHaE2?w=176&h=185&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2",
            name: "蒜你香专薯大虾锅",
            price: 89,
            num: 1
        }, {
            pid: 1,
            id: 3,
            img: "https://ts1.tc.mm.bing.net/th/id/OIP-C.5Jo4mepiQATV56TIoKpNMQHaFj?w=176&h=185&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2",
            name: "辣么麻专薯大虾锅",
            price: 89,
            num: 1
        }, {
            pid: 2,
            id: 4,
            img: "https://tse2-mm.cn.bing.net/th/id/OIP-C.CB5-j5QQGTF2VNk2y9QnNAHaFj?w=236&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7",
            name: "大叉烤肉",
            price: 29,
            num: 1
        }, {
            pid: 2,
            id: 5,
            img: "https://ts1.tc.mm.bing.net/th/id/OIP-C.rsbq2fdpJl0SQ6R8KM49MgHaE8?w=176&h=185&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2",
            name: "烤翅中",
            price: 12,
            num: 1
        }]
        // 详情
        $(".ggk").hide()
        $(".gg").on("click", () => {
            $(".ggk").show()
        })

        // tap切换
        function apply() {
            arr.forEach(item => {
                if (item.pid == 0) {
                    $(".box").append(`
                <li>
                    <img src="${item.img}"  onclick="xq(${item.id})">
                    <p>${item.name}</p>
                    <p><b>￥${item.price}</b>起/份</p>
                    <button onclick="jia()">+</button>
                    <span>${item.num}</span>
                    <button onclick="jian()">-</button><br>
                    <button onclick="add(${item.id})">添加购物车</button>
                </li>`)
                }
            })
        }

        $(".t").each((index, item) => {
            item.addEventListener("click", () => {
                $(".box").html("")
                arr.forEach(i => {
                    if (i.pid == index) {
                        $(".box").append(`
                            <li>
                                <img src="${i.img}" onclick="xq(${i.id})">
                                <p>${i.name}</p>
                                <p><b>￥${i.price}</b>起/份</p>
                                <button onclick="jia()">+</button>
                                <span>${i.num}</span>
                                <button onclick="jian()">-</button><br>
                                <button onclick="add(${i.id})">添加购物车</button>
                            </li>`)
                    }
                })
            })
        })

        apply()

        // 详情
        $(".xiang").hide()
        var iid
        function xq(id) {
            $(".xiang").show()
            iid = id
            x()
        }

        function x() {
            var a = arr.find(item => item.id == iid)
            $(".xiang").html(`
                <h1>菜品详情</h1>
                <img src="${a.img}" onclick="xq(${a.id})">
                <p>${a.name}</p>
                <p><b>￥${a.price}</b>起/份</p>
                <button>加入购物车</button>
            `)
        }

        // 添加购物车
        var arr2 = []
        function add(id) {
            var a = arr.find(item => item.id == id)
            arr.push({
                id: arr2.length,
                name: a.name,
                img: a.img,
                price: a.price,
                num: a.num
            })
        }

        // 价格
        var qian = 0
        function zong() {
            arr2.forEach(item => {
                qian += item.price * item.num
            })
        }

        // 加减
        function jia() {
            arr.forEach(item => {
                item.num++
                apply()
            })
        }

        function jian() {
            arr.forEach(item => {
                item.num--
                apply()
            })
        }

        // 提交
        $(".dox").hide()
        function tj() {
            $(".dox").show()
            arr2.forEach(i => {
                $(".dox").append(`
                <li>
                    <img src="${i.img}">
                    <p>${i.name}</p>
                    <p>￥${i.price}</p>
                    <button>结算</button>
                </li>`)
            })
        }
    </script>
</body>

</html>